<template>
  <div class="realtimeSz">
    <!-- /搜索栏 -->
    <div class="search-bar">
      <div class="status-stats">
        <div class="status-item" 
          v-for="item in statusList" 
          :key="item.value"
          :class="{ active: statusValue.value === item.value }"
          @click="handleStatusClick(item)">
          <div v-html="item.html" class="label"></div>
          <div class="count">({{ item.count || 0 }})</div>
        </div>
      </div>

      <div class="input">
        <CustomSelect
          v-model="searchValue.source"
          placeholder="选择来源搜索"
          :optionList="sourceList"
          @on-change="refreshTable" />
      </div>

      <div class="input">
        <CustomSelect
          v-model="searchValue.area"
          placeholder="选择区搜索"
          :optionList="areaList"
          @on-change="handleAreaChange" />
      </div>

      <div class="input">
        <CustomSelect
          v-model="searchValue.town"
          placeholder="选择镇搜索"
          :optionList="filteredTownList"
          @on-change="refreshTable" />
      </div>

      <div class="input">
        <CustomInput
          v-model="searchValue.name"
          placeholder="输入测站搜索"
          @on-enter="refreshTable" />
      </div>

      <div class="btn">
        <CustomButton
          type="primary"
          icon="ios-search"
          @click="refreshTable">搜索</CustomButton>
      </div>
    </div>
    <!-- /搜索栏 -->

    <!-- /表格 -->
    <div class="table-box">
      <CustomTable
        ref="JTable"
        list-url="/realtimeNld/list"
        :columns="columns"
        :is-pages="false"
        :border="true"
        :search-value="searchValue"
        :height="tableHeight"
        @handleData="handleTableData" />
    </div>
    <!-- /表格 -->
  </div>
</template>

<script>
import { areaList, townList  } from 'common/js/modules'
import { columns, sourceList } from './js/modules'

export default {
  created () {
    this.sourceList = sourceList()
    this.areaList = areaList()
    this.townList = townList()
    this.filteredTownList = this.townList
    this.columns = columns(this)
    this.initTableHeight()
    window.addEventListener('resize', this.handleResize)
  },
  data () {
    return {
      filteredTownList: [],
      statusValue: { value: '全部' },
      searchValue: {
        isTotal: '0',
        name: '',
        area: '',
        town: '',
        source: ''
      },
      tableHeight: 600,
      originalData: [], // 存储原始数据
      filteredData: [], // 存储筛选后的数据
      statusList: [
        { html: '全部<br />数量', label: '全部', value: '全部', count: 0 },
        { html: '水位<br />正常', label: '水位正常', value: '水位正常', count: 0 },
        { html: '水位<br />延迟', label: '水位延迟', value: '水位延迟', count: 0 },
        { html: '水位<br />离线', label: '水位离线', value: '水位离线', count: 0 },
        { html: '水位<br />缺失', label: '水位缺失', value: '水位缺失', count: 0 },
        { html: '视频<br />全部在线', label: '视频全部在线', value: '视频全部在线', count: 0 },
        { html: '视频<br />部分在线', label: '视频部分在线', value: '视频部分在线', count: 0 },
        { html: '视频<br />全部离线', label: '视频全部离线', value: '视频全部离线', count: 0 },
        { html: '视频<br />缺失', label: '视频缺失', value: '视频缺失', count: 0 },
      ]
    }
  },
  methods: {
    refreshTable () {
      this.$refs.JTable._getList()
    },
    handleAreaChange (value) {
      // 清空已选择的镇
      this.searchValue.town = ''
      // 根据选择的区筛选镇列表
      this.filteredTownList = value ? this.townList.filter(item => item.value.indexOf(value) > -1) : this.townList
      // 刷新表格数据
      this.refreshTable()
    },
    initTableHeight () {
      this.tableHeight = window.innerHeight - 150
    },
    handleResize () {
      this.initTableHeight()
    },
    handleStatusClick (item) {
      this.statusValue = item
      this.filterTableData()
    },
    filterTableData () {
      const { label, value } = this.statusValue

      switch (label) {
        case '全部':
          this.filteredData = [...this.originalData]
          break
        case '水位正常':
        case '水位延迟':
        case '水位离线':
        case '水位缺失':
          this.filteredData = this.originalData.filter(item => item.status === value)
          break
        case '视频全部在线':
        case '视频部分在线':
        case '视频全部离线':
        case '视频缺失':
          this.filteredData = this.originalData.filter(item => item.__custom_videoDetailStatus === value)
          break
      }
      
      this.$refs.JTable.tableData = this.filteredData

      this.$nextTick(() => {
        this.$refs.JTable.hideLoading()
      })
    },
    handleTableData (res) {
      if (res) {
        this.originalData = res.list || []
        this.filteredData = [...this.originalData]
        if (res.statusCount) {
          this.statusList.forEach(item => {
            item.count = res.statusCount[item.value] || 0
          })
        }
      }
    }
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.handleResize)
  }
}
</script>

<style lang="scss" scoped>
.realtimeSz {
  width: 100%;
  height: 100%;
  position: relative;
  padding-top: 10px;
  box-sizing: border-box;
  > .search-bar {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 0 10px;
    > .status-stats {
      flex: 1;
      display: flex;
      gap: 3px;
      padding: 8px 0;
      .status-item {
        cursor: pointer;
        color: #666;
        font-size: 14px;
        transition: all 0.3s ease;
        padding: 4px 8px;
        border-radius: 4px;
        border: 1px solid transparent;
        &:hover {
          transform: translateY(-2px);
        }
        &.active {
          font-weight: bold;
          background-color: rgba(45, 140, 240, 0.1);
          border-color: currentColor;
        }
        &:nth-child(1) { // 全部
          color: black;
          &.active, &:hover { color: #2d8cf0; }
        }
        &:nth-child(2) { // 水位正常
          color: #19be6b;
          &.active, &:hover { color: #19be6b; }
        }
        &:nth-child(3) { // 水位延迟
          color: #ff9900;
          &.active, &:hover { color: #ff9900; }
        }
        &:nth-child(4) { // 水位离线
          color: gray;
          &.active, &:hover { color: gray; }
        }
        &:nth-child(5) { // 水位缺失
          color: #ed4014;
          &.active, &:hover { color: #ed4014; }
        }
        &:nth-child(6) { // 视频全部在线
          color: #19be6b;
          &.active, &:hover { color: #19be6b; }
        }
        &:nth-child(7) { // 视频部分在线
          color: #ff9900;
          &.active, &:hover { color: #ff9900; }
        }
        &:nth-child(8) { // 视频全部离线
          color: gray;
          &.active, &:hover { color: gray; }
        }
        &:nth-child(9) { // 视频缺失
          color: #ed4014;
          &.active, &:hover { color: #ed4014; }
        }
        .label {
          text-align: center;
        }
        .count {
          margin-left: 4px;
          opacity: 0.8;
          text-align: center;
        }
      }
    }
    > .input {
      flex: 0 0 80px;
      margin-right: 10px;
    }
  }
  > .table-box {
    width: 100%;
    height: calc(100% - 42px);
    position: relative;
    padding: 0 10px;
    overflow-y: auto;
    overflow-x: hidden;
  }
}
</style>
